import React, { useEffect } from 'react'
window._AMapSecurityConfig = {
  securityJsCode: 'f8a3ff2d18ceb3ece8afe6b8d4f02cf2',
}

import AMapLoader from '@amap/amap-jsapi-loader'

const Index = () => {
  useEffect(() => {
    let map: any
    AMapLoader.load({
      key: '5bbbfd52b316dcd6e2f4e6b4279a12a4', // 申请好的Web端开发者Key，首次调用 load 时必填
      // securityJsCode: 'f8a3ff2d18ceb3ece8afe6b8d4f02cf2',
      version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Driving'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        //基本地图加载
        var map = new AMap.Map('map', {
          esizeEnable: true,
          center: [116.397428, 39.90923], //地图中心点
          zoom: 13, //地图显示的缩放级别
        })

        //构造路线导航类
        var driving = new AMap.Driving({
          map: map,
          panel: 'panel',
        })
        // 根据起终点名称规划驾车导航路线
        driving.search(
          [
            { keyword: '北京市地震局(公交站)', city: '北京' },
            { keyword: '亦庄文化园(地铁站)', city: '北京' },
          ],
          function (status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === 'complete') {
              console.log('绘制驾车路线完成')
            } else {
              console.log('获取驾车数据失败：' + result)
            }
          },
        )
      })
      .catch((e) => {
        console.log(e)
      })
    return () => {
      map?.destroy()
    }
  })

  return (
    <div>
      <div id="map" style={{ height: '640px' }}>
        Hello test2
      </div>
      <div id="panel"></div>
    </div>
  )
}
export default Index
